<template>
    <el-row :gutter="30">
        <el-col :xs="24" :sm="24" :lg="12">
            <div class="ibox">
                <div class="ibox-title">
                <h5>测试通过率趋势</h5> 
                </div>
                <div class="ibox-content" style="height: 420px;">
                    <ve-line :data="chartReportData" :settings="chartPassSettings" :data-zoom="dataZoom">
                        <div class="data-empty" v-if="!isDisplay(chartReportData.rows)">没有数据😂</div>
                    </ve-line> 
                </div>
            </div>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="12">
            <div class="ibox">
                <div class="ibox-title">
                <h5>测试覆盖率趋势</h5> 
                </div>
                <div class="ibox-content" style="height: 420px;">
                    <ve-line :data="chartReportData" :settings="chartCoverageSettings" :data-zoom="dataZoom">
                        <div class="data-empty" v-if="!isDisplay(chartReportData.rows)">没有数据😂</div>
                    </ve-line> 
                </div>
            </div>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="12">
            <div class="ibox">
                <div class="ibox-title">
                <h5>测试缺陷趋势</h5> 
                </div>
                <div class="ibox-content" style="height: 420px;">
                    <ve-line :data="chartReportData" :settings="chartBugCountSettings" :data-zoom="dataZoom">
                        <div class="data-empty" v-if="!isDisplay(chartReportData.rows)">没有数据😂</div>
                    </ve-line> 
                </div>
            </div>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="24">
            <div class="ibox">
                <div class="ibox-title">
                <h5>测试报告汇总</h5> 
                </div>
                <div class="ibox-content">
                    <el-table
                        ref="filterTable"
                        :data="tableReportData.slice((currentPage-1)*pageSize, currentPage*pageSize)"
                        style="width: 100%">
                        <el-table-column prop="t_start_date" label="测试开始日期" min-width=""></el-table-column>
                        <el-table-column prop="t_end_date" min-width="" label="测试截止日期"></el-table-column>
                        <el-table-column prop="t_phase" min-width="" label="测试阶段"></el-table-column>
                        <el-table-column prop="t_version_key" min-width="" label="测试版本"></el-table-column>
                        <el-table-column prop="t_version_value" min-width="" label="版本号"></el-table-column>
                        <el-table-column prop="t_pass_rate" min-width="100" label="测试通过率"></el-table-column>
                        <el-table-column prop="t_coverage_rate" min-width="" label="测试覆盖率"></el-table-column>
                        <el-table-column prop="t_executor" min-width="" label="执行者"></el-table-column>
                        <el-table-column prop="t_bug_count" min-width="" label="缺陷数量"></el-table-column>
                        <el-table-column min-width="" label="操作"></el-table-column>
                        <!-- <el-table-column fixed="right" label="操作" width="100">
                            <template slot-scope="sub">
                                <el-button type="text" size="small" @click="goto_url_blank(sub.row)">查看详情</el-button>
                            </template>
                        </el-table-column> -->
                    </el-table>
                    <el-pagination
                        style="padding-top: 10px;"
                        background
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        layout="total, prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                </div>
            </div>
        </el-col>
    </el-row>
</template>
<script>
export default {
    props: {
        filters: Object
    },
    data() {
        return {
            dataZoom: [
                {
                    type: 'slider',
                    start: 0,
                    end: 100
                }
            ],
            chartPassSettings: {
                metrics: ['t_pass_rate__avg'],
                dimension: ['t_end_date'],
                labelMap: {
                    t_pass_rate__avg: '测试通过率',
                },
            },
            chartCoverageSettings: {
                metrics: ['t_coverage_rate__avg'],
                dimension: ['t_end_date'],
                labelMap: {
                    t_coverage_rate__avg: '测试覆盖率',
                },
            },
            chartBugCountSettings: {
                metrics: ['t_bug_count__sum'],
                dimension: ['t_end_date'],
                labelMap: {
                    t_bug_count__sum: '测试缺陷'
                },
            },
            chartReportData: {
                columns: ['t_end_date', 't_pass_rate__avg', 't_coverage_rate__avg', 't_bug_count__sum'],
                rows: []
            },
            tableReportData: [],
            currentPage: 1,
            total: 0,
            pageSize: 10,
        }
    },
    watch: {
        filters: {
            handler: function() {
                this.getData();
            },
            deep: true,
        },
    },
    methods: {
        getTestExecution: function(project, time, testphase, testversion) {
            var source = process.env.VUE_APP_KANBAN_HOST + '/api/qa/gettestexecution?project=';
            source = source+project+'&time='+time+'&testphase='+testphase+'&testversion='+testversion;
            this.$axios.get(source)
                .then((response) => {
                    if (response.status == 200) {
                        // eslint-disable-next-line
                        // console.log(response.data.sum);
                        if (response.data.code == 200) {
                            this.chartReportData.rows = response.data.sum_by_date;
                            this.tableReportData = response.data.tasks;
                            this.total = this.tableReportData.length;
                        }
                    }
                })
                .catch((err) => {
                    // eslint-disable-next-line
                    console.log(err);
                });
        },
        getData() {
            var time = this.filters.date;
            if (null == time || "undefined" == typeof(time)) {
                time = ''
            }
            var testphase = this.filters.select1;
            var testversion = this.filters.select2;
            this.getTestExecution(this.project_id,time,testphase,testversion)
        },
        isDisplay(data) {
            if (data && data.length != 0) {
                return true;
            } else {
                return false;
            }
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
        }
        
    },
    created: function() {
        this.project_id = this.$route.params.pmsProjectId;
    },
    mounted: function() {
        this.getData();
    }
}
</script>
<style lang="scss" scoped>
    @import '../../assets/common/common.scss';
    .data-empty {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, .7);
    color: #888;
    font-size: 14px;
    }
</style>